import React, {FC, useEffect, useState} from 'react';
import Section01ImgPath from '@/asserts/images/section-1.jpg'
import Section02ImgPath from '@/asserts/images/section-2.jpg'
import Section03ImgPath from '@/asserts/images/section-3.jpg'
import Section04ImgPath from '@/asserts/images/section-4.jpg'
import Section05ImgPath from '@/asserts/images/section-5.jpg'
import Section06ImgPath from '@/asserts/images/section-6.jpg'
import Section07ImgPath from '@/asserts/images/section-7.jpg'
import Section08ImgPath from '@/asserts/images/section-8.jpg'
import Section09ImgPath from '@/asserts/images/section-9.jpg'
import Section10ImgPath from '@/asserts/images/section-10.jpg'
import styles from './PhotoWall.module.scss'

interface PhotoWallProps {
}

const PhotoWall: FC<PhotoWallProps> = (props) => {
    const {children} = props;

    useEffect(() => {
        console.log('PhotoWall 组件挂载完毕!');
    }, []);

    console.log('PhotoWall 组件render!');
    return (
        <React.Fragment>
            <div className={styles.main}>
                <div>
                    <img src={Section05ImgPath}/>
                    <img src={Section04ImgPath}/>
                    <img src={Section02ImgPath}/>
                    <img src={Section03ImgPath}/>
                </div>
                <div>
                    <img src={Section08ImgPath}/>
                    <img src={Section01ImgPath}/>
                    <img src={Section07ImgPath}/>
                    <img src={Section10ImgPath}/>
                </div>
                <div>
                    <img src={Section06ImgPath}/>
                    <img src={Section09ImgPath}/>
                    <img src={Section08ImgPath}/>
                </div>
            </div>
            <div className={styles.mainOverlay}></div>
            <div className={styles.content}>
                {children}
            </div>
        </React.Fragment>
    );
};

export default PhotoWall;
